import Base from '@/components/Base';
import { Button, Card, Slider, Row, Col, Typography, Divider } from 'antd';
import { KayButton } from '@/components/KayUI';
import webGlControl from './control';
import webGlControlGpu from './controlGpu';
import styles from './index.less';

const { Title, Paragraph, Text } = Typography;

interface State {}

export default class Index extends Base<any, State> {
  public state: State = {};

  public async didShow() {}

  public async didMount() {
    // console.log('history', this.navigator.history)
    webGlControl.init();
    webGlControlGpu.init();
  }

  public willUnmount() {
    webGlControl.destroy();
    webGlControlGpu.destroy();
  }

  public render() {
    const {} = this.state;
    return (
      <Card title="">
        <Divider />

        <Typography>
          <Title>粒子运动</Title>
          <Paragraph>
            <p>
              参考：
              <a href="https://www.cnblogs.com/wanbo/p/6869175.html">
                https://www.cnblogs.com/wanbo/p/6869175.html
              </a>
            </p>
          </Paragraph>
          <Title level={3}>1、基于CPU</Title>
          <Paragraph></Paragraph>
        </Typography>

        <div
          className={styles.canvasBox}
          id="WebGL-points-cpu"
          style={{ height: '600px' }}
        />

        <Typography style={{ marginTop: 60 }}>
          <Title level={3}>2、基于GPU</Title>
          <Paragraph>
            <p>
              这里用到了一个矩阵转换，用法：(但是如果是针对每一个顶点循环进行转换的话，会很耗时。可以用
              <Text code>applyMatrix</Text>操作整个模型)
            </p>
            <div className="codeBox">
              <p>{`const vector = new Three.Vector3(1,1,1);   //新建一个三维向量`}</p>
              <p>{`const matrix = new Three.Matrix4();   //新建一个4*4矩阵`}</p>
              <p>{`// matrix.makeRotationX(Math.PI/2)  //这是一个 rotateX=90° 的矩阵`}</p>
              <p>{`matrix.makeTranslation(2,0,0)  //这是一个 tranxlateX=2 的矩阵`}</p>
              <p>{`let changedVector = vector.applyMatrix4(matrix)  //运算，三维向量*矩阵`}</p>
              <p>{`console.log('Matrix::::', vector, matrix, changedVector)  //得到的changedVector就是转换后的坐标点`}</p>
            </div>
          </Paragraph>
        </Typography>

        <div
          className={styles.canvasBox}
          id="WebGL-points-gpu"
          style={{ height: '600px' }}
        />
      </Card>
    );
  }
}
